<template>
  <div>
    <!-- <div class="center" style="width: 80%;background: darkgoldenrod;"> -->
    <div class="column_c" style="width: 80%;">

      <el-table :data="List" style="width: 100%">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="title" label="姓名"></el-table-column>

        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="salary_requirement" label="期望薪资"></el-table-column>
        <el-table-column prop="workplace" label="期望工作地点"></el-table-column>
        <el-table-column prop="created_at" label="发布时间"></el-table-column>
        <!--     <el-table-column prop="attachment" label="附件">
            <a :href="item_att">文件{{indexatt+1}}</a>
        </el-table-column> -->

        <el-table-column prop="attachment" label="附件">
          <template slot-scope="scope">
            <a :href="scope.row.attachment">点击下载</a>
            <!-- {{ scope.row.attachment }} -->
          </template>
        </el-table-column>


        <el-table-column label="操作" width="90">
          <template slot-scope="scope">
            <div class="row center">
              <div style="color: #00A30F;" class="mr10 cursor" @click="handleUpdate(scope.row)">修改</div>
              <div style="color: #00A30F;" class=" cursor" @click="handleDelete(scope.row)">删除</div>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="center tit mt_50" style="width: 60%;">
        <img style="width: 31px;height: 34px;" src="../../assets/images/ren.png" />
        <div class="color_fff f_20 ml_12">基本信息</div>
      </div>



      <el-form label-position="right" label-width="80px" style="margin-top: 60px;" :model="form" ref="form" :rules="rules">

        <el-form-item label="姓名:" prop="title">
          <el-input disabled style="width: 800px;" v-model="form.title"></el-input>
        </el-form-item>

        <el-form-item label="年龄:" prop="age">
          <el-input style="width: 800px;" v-model="form.age"></el-input>
        </el-form-item>

        <el-form-item label="专业:" prop="major">
          <el-input style="width: 800px;" v-model="form.major"></el-input>
        </el-form-item>

        <el-form-item label="毕业院校:" prop="school" style="white-space: nowrap;">
          <el-input style="width: 800px;" v-model="form.school"></el-input>
        </el-form-item>

        <el-form-item label="工作经验:" prop="work_experience" style="white-space: nowrap;">
          <el-input style="width: 800px;" v-model="form.work_experience"></el-input>
        </el-form-item>

        <el-form-item label="籍贯:" prop="native_place">
          <el-input style="width: 800px;" v-model="form.native_place"></el-input>
        </el-form-item>


        <el-form-item label="联系方式:" prop="tel" style="white-space: nowrap;">
          <el-input style="width: 800px;" v-model="form.tel"></el-input>
        </el-form-item>

        <el-form-item label="简介:" prop="intro">
          <el-input style="width: 800px;" type="textarea" v-model="form.intro"></el-input>
        </el-form-item>



        <!--     <el-form-item label="免冠照:">
          <el-upload :action="upload_url" :headers="headers" list-type="picture-card" :on-success="handleChangePho"
            :file-list="phoFiles" :on-remove="handleRemovePho" :show-file-list="true">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item> -->

        <el-form-item label="免冠照:" prop="picture">
          <el-upload :action="upload_url" :headers="headers" :before-upload="handleSetHeaders" :on-success="handleFileSuccess" :show-file-list="false" class="avatar-uploader">
            <img style="width: 100px;height: 100px;" v-if="form.bareheaded_photo!==undefined" :src="form.bareheaded_photo" class="avatar">
            <i style="font-size: 30px;margin-top: 5px;" v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="附件:">
          <el-upload class="upload-demo" :action="upload_url" :on-remove="handleRemove" :on-change="handleChange" :limit="1" :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>


        <div class="center tit mt_50">
          <img style="width: 31px;height: 34px;" src="../../assets/images/gzzl.png" />
          <div class="color_fff f_20 ml_12">工作经历</div>
        </div>

        <!-- 工作经历++++++++++++++++++++++++++++++++++++++++++++++++ -->
        <div class="row mt_50" v-for="(elem,index) in occupational_history" :key="elem.id">

          <img style="width: 170px;height: 170px;" src="../../assets/images/gstb.png" />
          <div style="margin-left: 40px;margin-top: 20px;">
            <div class="row_a_c">
              <div class="gsmc center">公司名称</div>
            </div>

            <div class="row_a_c mt20">
              <div class="gsmc center" style="background: #5579F4;">岗位名称</div>
            </div>

            <div class="row_a_c mt_10">
              <div class="gsmc center" style="background: #6D8DF7;">工作成果</div>
            </div>
          </div>

          <div class="column_c " style="padding-top: 20px;">
            <el-input style="width: 300px;margin-bottom: 20px;" v-model="elem.company_name" placeholder="请输入"></el-input>
            <el-input style="width: 300px;margin-bottom: 10px;" v-model="elem.post_name" placeholder="请输入"></el-input>
            <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 10}" style="width: 300px;" v-model="elem.work_achievement" placeholder="请输入内容如：xx时间加入xx公司，解决了xx问题，完成了xx成果，因xx原因离开了公司。"></el-input>
          </div>

          <div class="center ml_20 cursor" v-if="index !== occupational_history.length-1" @click="removeElem(index)">
            <i class="el-icon-delete f_26"></i>
          </div>

        </div>
        <!-- 工作经历================================================================ -->

        <div class="center gdjl mt_60 mb_50 ml_50 cursor" @click="addElem">
          <i style="color: #FFFEFE;" class="el-icon-plus"></i>
          <div class="f_20" style="color: #FFFEFE;">添加更多经历</div>
        </div>


        <div class="center tit mt_50" prop="title">
          <img style="width: 31px;height: 34px;" src="../../assets/images/dl.png" />
          <div class="color_fff f_20 ml_12">求职意向</div>
        </div>

        <div class="mt_60">
          <el-form-item label="福利待遇:" prop="social_benefits" style="white-space: nowrap;">
            <el-input style="width: 800px;" v-model="form.social_benefits"></el-input>
          </el-form-item>

          <el-form-item label="期待岗位:" prop="expected_position" style="white-space: nowrap;">
            <el-input style="width: 800px;" v-model="form.expected_position"></el-input>
          </el-form-item>

          <el-form-item label="薪资要求:" prop="salary_requirement" style="white-space: nowrap;">
            <el-input style="width: 800px;" v-model="form.salary_requirement"></el-input>
          </el-form-item>

          <el-form-item label="工作地点:" prop="workplace" style="white-space: nowrap;">
            <el-input style="width: 800px;" v-model="form.workplace"></el-input>
          </el-form-item>
        </div>

        <div class="center">
          <el-button style="width: 110px;background: #5579F4;margin-bottom: 120px;" type="primary" @click="submitForm">提交</el-button>
        </div>



      </el-form>
    </div>
  </div>


</template>

<script>
  import * as Auth from '@/utils/auth';
  import * as Job from "@/api/operation/job";
  export default {
    name: 'applicant',
    components: {


    },
    data() {
      return {
        List: [],
        headers: Auth.getHeader(),
        upload_url: process.env.VUE_APP_BASE_URL + '/file/upload',
        form: {},
        userId: '',
        occupational_history: [], // 初始元素数组
        idCounter: 1, // 初始计数器
        fileList: [],
        phoFiles: [],
        isActive: [],
        JobList: [], //职位列表
        new_how: 1, // 1全部 2最新 3最热
        // 表单校验
        rules: {
          title: [{
              required: true,
              message: "姓名不能为空",
              trigger: "blur"
            },
            {
              min: 2,
              max: 10,
              message: '姓名长度在 2 到 10 个字符',
              trigger: 'blur'
            }
          ],

          age: [{
              required: true,
              message: "年龄不能为空",
              trigger: "blur"
            },

          ],
          major: [{
              required: true,
              message: "专业不能为空",
              trigger: "blur"
            },
            {
              min: 2,
              max: 30,
              message: '长度在 2 到 30 个字符',
              trigger: 'blur'
            }
          ],
          school: [{
              required: true,
              message: "毕业院校不能为空",
              trigger: "blur"
            },
            {
              min: 2,
              max: 30,
              message: '长度在 2 到 30 个字符',
              trigger: 'blur'
            }
          ],
          work_experience: [{
            required: true,
            message: "工作经验不能为空",
            trigger: "blur"
          }],
          native_place: [{
              required: true,
              message: "籍贯不能为空",
              trigger: "blur"
            },
            {
              min: 2,
              max: 10,
              message: '籍贯长度在 2 到 10 个字符',
              trigger: 'blur'
            }
          ],
          tel: [{
              required: true,
              message: "联系方式不能为空",
              trigger: "blur"
            },
            {

              max: 11,
              message: '最长16个字符',
              trigger: 'blur'
            }
          ],
          intro: [{
            required: true,
            message: "简介不能为空",
            trigger: "blur"
          }],
          social_benefits: [{
              required: true,
              message: "福利待遇不能为空",
              trigger: "blur"
            },
            {
              min: 2,
              max: 20,
              message: '长度在 2 到 20 个字符',
              trigger: 'blur'
            }
          ],
          expected_position: [{
              required: true,
              message: "期待岗位不能为空",
              trigger: "blur"
            },
            {
              min: 2,
              max: 10,
              message: '长度在 2 到 10 个字符',
              trigger: 'blur'
            }
          ],
          salary_requirement: [{
            required: true,
            message: "薪资要求不能为空",
            trigger: "blur"
          }, {
            min: 2,
            max: 10,
            message: '长度在 2 到 10 个字符',
            trigger: 'blur'
          }],
          workplace: [{
            required: true,
            message: "工作地点不能为空",
            trigger: "blur"
          }, {
            min: 2,
            max: 20,
            message: '长度在 2 到 20 个字符',
            trigger: 'blur'
          }],

        },
      }
    },
    created() {
      this.addElem();
      this.userId = localStorage.getItem('user_id')
      this.form.title = localStorage.getItem('username')
      this.getList();

    },
    mounted() {

    },
    methods: {

      handleSetHeaders() {
        this.headers = Auth.getHeader();
      },
      handleFileSuccess(res) {
        this.$set(this.form, 'bareheaded_photo', res.data);
      },

      addElem() {
        this.occupational_history.length
        if (this.occupational_history.length > 4) {
          this.$modal.msgError('最多只能增加5个工作经历');
        } else {
          const newElem = {
            id: this.idCounter++,
            company_name: '',
            post_name: '',
            work_achievement: '',
          };
          this.occupational_history.push(newElem); // 将新元素添加到数组中
        }
      },

      removeElem(index) {
        this.occupational_history.splice(index, 1); // 删除指定索引的元素
      },

      /** 修改按钮操作查详情 */
      handleUpdate(row) {
        var per = {}
        per.id = row.id
        per.user_id = this.userId
        per.platform = 'biqi-developer-platform'
        per.type_pj = 1
        Job.DetailApi(per).then(response => {
          this.form = response.data.info;
          this.fileList.push(response.data.info.attachment);
          this.occupational_history = response.data.info.occupational_history;
        });
      },

      /** 删除按钮操作 */
      handleDelete(row) {
        var per = {}
        per.id = [row.id]
        per.user_id = this.userId
        per.platform = 'biqi-developer-platform'
        per.type_pj = 1


        this.$modal.confirm('是否确认删除编？').then(function() {
          return Job.DeleteApi(per);
        }).then(() => {
          this.form = {};
          this.occupational_history = [];
          this.fileList = [];
          this.phoFiles = [];
          this.idCounter = 1;
          this.form.title = localStorage.getItem('username')
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },

      getList() {

        this.loading = true;
        this.form.user_id = this.userId
        this.form.platform = 'biqi-developer-platform'
        this.form.type_pj = 1

        Job.getListApi(this.form).then(response => {
          this.List = response.data.list;
          // this.form =  this.List;
          this.total = response.data.pagination.totalCount;

          this.loading = false;
        });
      },

      /** 提交按钮 */
      submitForm: function() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            if (this.form.id != undefined) {
              this.loading = true;
              this.form.user_id = this.userId
              this.form.platform = 'biqi-developer-platform'
              this.form.type_pj = 1
              this.form.occupational_history = this.occupational_history

              Job.UpdateApi(this.form).then(response => {
                this.$modal.msgSuccess('修改成功');
                this.getList();
              });
            } else {
              if (this.List.length > 0) {
                this.$modal.msgError('只能增加一条');
              } else {
                this.loading = true;
                this.form.user_id = this.userId
                this.form.platform = 'biqi-developer-platform'
                this.form.type_pj = 1
                this.form.occupational_history = this.occupational_history

                Job.AddApi(this.form).then(response => {
                  this.$modal.msgSuccess('新增成功');

                  this.loading = false;
                  this.form = {};
                  this.occupational_history = [];
                  this.fileList = [];
                  this.phoFiles = [];
                  this.idCounter = 1;
                  this.form.title = localStorage.getItem('username')
                  this.getList();
                });
              }

            }
          }
        });
      },

      // 设置photo值--图片上传拼接数据
      phoChange(fileList) {
        let temp_str = '';
        if (fileList.length > 0) {
          for (let i = 0; i < fileList.length; i++) {
            if (fileList[i].response) {
              if (fileList[i].response.code === 200) {
                if (i === 0) {
                  temp_str += fileList[i].response.data;
                } else {
                  // 最终photo的格式是所有已上传的图片的url拼接的字符串（逗号隔开）

                  temp_str += ',' + fileList[i].response.data;
                }
              }
            }
          }
        }

        this.form.bareheaded_photo = temp_str.split(',');
      },


      // 设置file值--文件上传拼接数据
      fileChange(fileList) {
        this.form.attachment = [];
        // this.fileList=[];
        // console.log('fileList',this.fileList)
        let temp_str = '';
        if (fileList.length > 0) {
          for (let i = 0; i < fileList.length; i++) {
            if (fileList[i].response) {
              if (fileList[i].response.code === 200) {
                if (i === 0) {
                  temp_str += fileList[i].response.data;
                } else {
                  // 最终photo的格式是所有已上传的图片的url拼接的字符串（逗号隔开）
                  temp_str += ',' + fileList[i].response.data;
                }
              }
            }
          }
        }

        this.form.attachment = temp_str.split(',');
      },

      //相册上传成功调用
      handleChangePho(res, file, fileList) {
        this.phoChange(fileList);
      },

      //图片移出
      handleRemovePho(file, fileList) {
        this.phoChange(fileList);

      },

      //文件上传成功调用
      handleChange(file, fileList) {

        this.fileChange(fileList);
      },

      //文件移出
      handleRemove(file, fileList) {
        this.fileChange(fileList);
      },

      toUrl(url) {
        this.$router.push({
          path: url
        })
      },
      toUrlc(url, id) {
        this.$router.replace({
          path: url,
          query: {
            id: id,
          }
        })
      },
    }
  }
</script>


<style lang="scss" scoped>
  .tit {
    width: 100%;
    height: 34px;
    border-radius: 1px;
    background: linear-gradient(to right, #FFFFFF, #6389FC, #6389FC, #FFFFFF);
  }

  .gsmc {
    width: 130px;
    height: 34px;
    background: #5A5AF1;
    border-radius: 6px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #FFFEFE;
    margin-right: 10px;
  }

  ::v-deep .el-input--medium .el-input__inner {
    height: 34px;
    line-height: 34px;
  }

  .gdjl {
    width: 300px;
    height: 80px;
    background: #C6D4FF;
    border-radius: 6px;
  }
</style>